import React from 'react';

import { ReactComponent as ChevronRight } from '@/assets/images/auth/ChevronRight.svg';
import { ModalContext } from '@/shared/context/ModalContext';
import { Modals } from '@/shared/interfaces';
import { useAppSelector } from '@/shared/store';
import { Button, ButtonVariants, Title } from '@/shared/ui';
import { Divider } from '@/shared/ui/Divider';

import { getUserProfile } from '../../model/selectors';
import cs from './Info.module.scss';

export const Info = () => {
  const { openModal } = React.useContext(ModalContext);
  const { isPremium } = useAppSelector(getUserProfile);

  return (
    <div className={cs.block}>
      <section onClick={() => (isPremium ? openModal(Modals.ChangeTarif) : openModal(Modals.TarifPlans))}>
        <span>
          <Title size="m-no-bold">{isPremium ? '99 ₽ в месяц' : 'Выберите тариф'}</Title>
          <Button className={cs.btn} noHover variant={ButtonVariants.Link}>
            {isPremium ? 'Списание 31 августа' : 'От 99 ₽/мес.'}
          </Button>
        </span>
        <ChevronRight />
      </section>
      <Divider />
      <section onClick={() => openModal(Modals.AdvantagesModal)}>
        <span>
          <Title size="m-no-bold">Возможности</Title>
          <span className={cs.avail}>Свой план, расширенная статистика, приватный клуб родителей</span>
        </span>
        <ChevronRight />
      </section>
    </div>
  );
};
